<template>
  <view class="header">
    <image
      class="avatar"
      :src="userInfo.avatar || '/static/images/default-avatar.png'"
      mode="aspectFill"
    />
    <span class="vip-tag">VIP{{ userInfo.accountGrade }}</span>
    <view class="user-details">
      <view class="user-name">{{ userInfo.nickName }}</view>
      <view class="user-id">
        <span>ID:{{ userInfo.userId }}</span>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
const userInfo = userStore.userInfo
</script>
<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  position: relative;
  .avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    border: 3rpx solid #00ffff;
    box-shadow: 0 0 20rpx rgba(46, 131, 255, 0.6);
  }

  .vip-tag {
    background: #00ffff;
    color: #fff;
    border-radius: 20rpx;
    font-size: 25rpx;
    font-weight: bold;
    position: absolute;
    bottom: 5rpx;
    width: 100rpx;
    text-align: center;
    line-height: 40rpx;
  }

  .user-details {
    margin-left: 20rpx;

    .user-name {
      font-size: 30rpx;
      font-weight: bold;
      text-shadow: 0 0 10rpx rgba(46, 131, 255, 0.8);
      margin: 20rpx 0;
    }

    .user-id {
      font-size: 24rpx;
      color: #fff;
    }
  }
}
</style>
